<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title th:text="${application.config.webName}+' 后台' "></title>

<div th:include="/common/layui"></div>
<div th:include="/common/jq"></div>


</head>
<style>
html,body{
	min-width: 1024px;
	 height:100%; 
	 overflow: hidden;
}
.layui-tab-item{
	overflow-x: scroll;
}
</style>

<script>

//定义在外面
var table;
var element;
layui.use([ 'laydate', 'laypage', 'layer','form', 'table', 'carousel',
			'upload', 'element' ], function() {
	table = layui.table;
	element = layui.element; //元素操作
});

//这个值是由  manage_top.jsp里面的一个显示隐藏的侧边的方法控制
var left_width = 200 ; 

//可以从子页面传来个 关闭  由我关闭
function delete_tab_id(id){
	 element.tabDelete('layer_tab', id); //
}

$(function(){
	init_tab_height();
	window.onresize = function(){
		init_tab_height();
	}
});


//遍历选项卡，存在true  不存在false
function for_tab(id){
	add_flag = false;
	$(".layui-tab-title li").each(function(){
		var lay_id = $(this).attr("lay-id");
		console.log(lay_id);
		if(lay_id){
			if(lay_id==id){
				add_flag = true;
			}
		}
	});
	return add_flag;
}

function init_tab_height(){
	var body_width = document.body.offsetWidth;
	layui_tab_item_width = (body_width-left_width);
	console.log("layui_tab_item的宽是:"+layui_tab_item_width);
	
	//计算layui-tab-item 需要 设置多少的高 顶部的60  layui-tab-title=41
	var body_height = document.body.offsetHeight;
	layui_tab_item_height = (body_height-60-41);
	$(".layui-tab-item").css("height",layui_tab_item_height+"px");
	console.log("layui_tab_item的高是:"+layui_tab_item_height);
}

function addTab(id,title,content){
	//遍历tab 看看这个id是否存在  如果存在直接切换
	var s = for_tab(id);
	if(s){
		element.tabChange('layer_tab', id); //切换到 用户点的
		init_tab_height();
	}else{
		//添加
		element.tabAdd('layer_tab', {
        title: title 
        ,content: content
        ,id: id
      });
	element.tabChange('layer_tab', id); //切换到 用户点的
	init_tab_height();
	}
}
</script>

<body>
<input type="hidden" id="roleId" value="" th:value="${roleId}">
<div style="display: flex;display: -webkit-flex; flex-direction:column; height: 100%; ">
	<div th:include="/common/manage_top" style="height: 60px; width: 100%;">
	</div>


	<div style=" flex:1;-webkit-flex:1;">
		<div th:include="/common/left_menu">
		</div>
		<div id="main_scroll" style="flex:1;-webkit-flex:1;padding-left: 200px;">
			<div class="layui-tab layui-tab-brief" lay-allowclose="true"  style="margin: 0;"  lay-filter="layer_tab">
				<ul class="layui-tab-title">
				</ul>
				<div class="layui-tab-content" style="padding:0px;">

			<!--		<shiro:hasPermission name="用户管理">　
						如果当前Subject有权限  用户管理
					</shiro:hasPermission>
					<shiro:lacksPermission name="用户管理">　
						如果当前Subject  没有权限   用户管理
					</shiro:lacksPermission>-->

				</div>
			</div>

		</div>
	</div>
</div>

</body>
<script>
	layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel',
			'upload', 'element' ], function() {
		var laydate = layui.laydate //日期
		, laypage = layui.laypage //分页
		,layer = layui.layer //弹层
		, table = layui.table //表格
		, carousel = layui.carousel //轮播
		, upload = layui.upload //上传
		, element = layui.element; //元素操作



		//默认打开Tab页面
		if($("#roleId").val()==1){
			var content1 ="<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='/houtai/bookborrow/manage'></iframe>";
			element.tabAdd('layer_tab', {
				title: "借阅申请审批"
				,content: content1
				,id: "borrow"
			});
			element.tabChange('layer_tab', "borrow"); //切换到 用户点的
			init_tab_height();
		}else {
			var content1 = "<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='/houtai/book/search/manage'></iframe>";
			element.tabAdd('layer_tab', {
				title: "图书查询"
				, content: content1
				, id: "find"
			});
			element.tabChange('layer_tab', "find"); //切换到 用户点的
			init_tab_height();
		}


		//监听导航点击
		element.on('nav(left_menu)', function(elem){
			// $(this)
			elem = $(this).parent();
			
		    var id = $(elem).attr("id");
			var url = $(elem).attr("url");
			var text = $(elem).attr("dd_text");
			var type = $(elem).attr("type");
			
			console.log(id);
			console.log(url);
			console.log(text);
			console.log(type);
			var content ="<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='"+url+"'></iframe>";
			
			
			switch(type){
			  case '0':
				  addTab(id,text,content);
			  break;
				case '1':
					window.open(url);
				  break;
				case '2':
				  //弹出layer 窗口
				  layer.open({
					  type: 2,
					  offset: ['300px', '200px'],
					  title: text,
					  shadeClose: false,
					  shade: 0.8,
					  area: ['500px', '600px'],
					  content: url //iframe的url
				   });
				  break;
			}
		  });
		
	});
</script>

</html>